<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>修改密码</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="changePW_box">
                <el-form :model="addUserFormData" ref="form" :rules="rules" label-width="95px">
                    <el-form-item label="旧密码："   prop="password">
                        <el-input type="password" v-model.trim="addUserFormData.oldPassword" placeholder="请输入旧密码"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码："   prop="password">
                        <el-input type="password" v-model.trim="addUserFormData.password" placeholder="请输入新密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码：" prop="password_confirm">
                        <el-input type="password" v-model.trim="addUserFormData.password_confirm" placeholder="确认新密码"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：" prop="mobileNumber">
                        <el-input type="number" v-model.trim="addUserFormData.mobileNumber" placeholder="请输入手机号"></el-input>
                    </el-form-item>

                    <div class="changePW_btn_box">
                        <el-button @click="">重 置</el-button>
                        <el-button type="primary" @click="changePWFn()">确 定</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        storeAsPut,
    } from '../api/api';
    import CryptoJS from 'crypto-js/crypto-js'
    export default {
        data(){
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.addUserFormData.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    this.pwFlag = true
                    callback();
                }
            };
            return{
                pwFlag:false,
                addUserFormData:{
                    oldPassword:'',
                    password:'',
                    password_confirm:'',
                    mobileNumber:''
                },
                rules:{
                    password_confirm:[
                        {validator: validatePass, trigger: 'blur' }
                    ]
                }
            }
        },
        mounted(){

        },
        methods:{
            changePWFn(){
                let that = this;
                let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
                if (!myreg.test(this.addUserFormData.mobileNumber)) {
                    this.$message.error('手机号错误！');
                }else{
                    if(this.pwFlag){
                        storeAsPut('/account/password?oldSha1password=' + CryptoJS.SHA1(this.addUserFormData.oldPassword).toString()
                            +'&sha1password=' + CryptoJS.SHA1(this.addUserFormData.password).toString()
                            +'&mobileNumber=' + this.addUserFormData.mobileNumber
                        ).then(function(res){

                            if(res.code === '500'){
                                that.$message.error(res.detail);
                            }else{
                                console.log(res)
                                that.$message.success('修改成功！');
                                localStorage.removeItem('token');
                                localStorage.removeItem('username');
                                that.$router.push('/login');
                            }
                        })
                    }else{
                        this.$message.error('请重新填写！');
                    }
                }


            }
        }
    }
</script>


<style>
    .changePW_box{
        width: 350px;
        margin: 0 auto;
    }
    .changePW_btn_box{
        text-align: center;
    }
</style>
